<template>
  <h2>firstName: {{ person.firstName }} lastName: {{ person.lastName }}</h2>
  <h2>fullName: {{ person.fullName }}</h2>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
  setup() {
    const person = reactive({
      firstName: '朱',
      lastName: '逸之',
    })
    // 计算属性的基本使用
    /* person.fullName = computed(() => {
      return person.firstName + ' ' + person.lastName
    }) */
    // 效果上来说，和上面等价
    person.fullName = computed({
      get() {
        return person.firstName + ' ' + person.lastName
      },
    })
    return {
      person,
    }
  },
}
</script>
